import { useState } from "react";
import { Button } from "antd";
import Header from "./components/Header";
import Search from "./components/Search";
import NavList from "./components/NavList";
import Count from "./components/Count";
import Topics from "./components/Topics";
import Post from "./components/Post";
import CommonList from "./components/CommonList";
import Hooks from "./components/Hooks";
import Hooks2 from "./components/Hooks2";
import Effect from "./components/Effect";

import TodoList from "./components/todo-list/TodoList";
import TodoList2 from "./components/context/TodoList";
import PlantList from "./components/PlantList";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import axios from "axios";
import Login from "./components/Login";
import PlantDetail from "./components/PlantDetail";
import AuthRoute from "./components/AuthRoute";
import AuthProvider from "./context/AuthProvider";
// BrowserRouter就在App内使用一次
// 组件(component)：
// 组件名首字母大写, 一定要只返回一个标签
const App = () => {
  return (
    <BrowserRouter>
      <AuthProvider>
        <nav style={{
          display: 'flex',
          width: 300,
          justifyContent: 'space-around'
        }}>
          <Link to="/">home</Link>
          <Link to="/plantList">PlantList</Link>
          <Link to="/todolist">todolist</Link>
          <Link to="/hooks">hooks</Link>
        </nav>
        <Switch>
          <AuthRoute path="/login" authCheckType="unauthed">
            <Login />
          </AuthRoute>
          <AuthRoute path="/plantList" authCheckType="authed">
            <PlantList />
          </AuthRoute>
          <AuthRoute path="/todolist" authCheckType="authed">
            <TodoList />
          </AuthRoute>
          <AuthRoute path="/hooks" authCheckType="authed">
            <Hooks2 />
          </AuthRoute>
          <AuthRoute path="/" authCheckType="authed">
            <h1>首页</h1>
          </AuthRoute>
        </Switch>
      </AuthProvider>
    </BrowserRouter>
  );
}
export default App;

// map
// filter
let arr = [1, 2, 3, 4, 5, 6];

Array.prototype.myFilter = function (callback) {
  let newArr = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i)) {
      newArr.push(this[i]);
    }
  }
  return newArr;
}
let newArr = arr.myFilter((item, index) => item % 2 == 0)
// console.log(newArr);


// let newArr = [];
// for(let i=0; i<arr.length; i++){
//   if(arr[i]%2==0){
//     newArr.push(arr[i])
//   }
// }
// console.log(newArr)
// SPA